<template>
  <div class="app-container">
    <el-radio-group v-model="labelPosition" size="small">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
      <el-radio-button label="top">顶部对齐</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px"></div>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      ref="formLabelAlign"
    >
      <el-form-item label="账号" prop="account">
        <el-input v-model="formLabelAlign.account"></el-input>
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
      >
        <el-input v-model="formLabelAlign.password"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="formLabelAlign.nickname"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobilePhoneNumber">
        <el-input v-model="formLabelAlign.mobilePhoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formLabelAlign.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="resetForm('formLabelAlign')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import userApi from "@/api/user";
export default {
  inject: ["reload"],
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        id: "",
        account: "",
        password: "",
        nickname: "",
        mobilePhoneNumber: "",
        email: "",
      },
    };
  },
  methods: {
    submitForm() {
      this.submitUser();
      this.$router.push("/");
    },
    resetForm(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
    echoInfo() {
      userApi.getUserById(this.$route.params.id).then((response) => {
        this.formLabelAlign = response.data;
      });
    },
    submitUser() {
      if (this.$route.params.pattern != "add") {
        userApi.editUser(this.formLabelAlign);
      } else {
        userApi.addUser(this.formLabelAlign);
      }
      this.reload();
    },

  },
  created() {
    if (this.$route.params.pattern != "add") {
      this.echoInfo();
    }
  },
};
</script>

<style scoped>
</style>

